<template>
  <div class="container">
    <div class="app-container">
      <el-row class="wangjiedong">
        <span style="margin-right: 15px;">楼宇名称</span>
        <el-input v-model="parkParams.name" style="width:200px" size="mini" class="sousuo" />
        <el-button type="primary" size="mini" @click="search">查询</el-button>
        <el-divider />
      </el-row>
      <el-button type="primary" style="margin: 0px 25px;" size="mini" @click="add">添加楼宇</el-button>
      <el-table :data="list">
        <el-table-column align="center" label="序号" type="index" />
        <el-table-column align="center" label="楼宇名称" prop="name" />
        <el-table-column align="center" label="层数" prop="floors" />
        <el-table-column align="center" label="在管面积(m²)" prop="area" />
        <el-table-column align="center" label="物业费(元/m²)" prop="propertyFeePrice" />
        <el-table-column align="center" label="状态">
          <template v-slot="{ row }">
            <span>  {{ row.status === 0 ? "空置中" :"租聘中" }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="emit(row)">编辑</el-button>

            <el-popconfirm slot="reference" title="确定删除这个数据吗？" @onConfirm="del(row.id)">
              <el-button slot="reference" size="mini" type="text">删除</el-button>

            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <el-row style="height:80px" type="flex" justify="end" align="middle">
        <el-pagination
          layout="total, prev, pager, next, sizes, jumper "
          :total="parkParams.total"
          :page-size="parkParams.pagesize"
          :page-sizes="[5, 10, 15, 20]"
          :current-page="parkParams.page"
          @current-change="change"
          @size-change="handleSizeChange"
        />
      </el-row>
      <el-dialog :visible.sync="dialogVisible" width="500px" title="添加楼宇" @close="btnCancel">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" style="width: 100%; padding: 0 40px;">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="ruleForm.name" size="mini" placeholder="请输入楼宇名称" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="ruleForm.floors" size="mini" placeholder="请输入楼宇层数" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="ruleForm.area" size="mini" placeholder="请输入在管面积">
              <template slot="append">m²</template>
            </el-input>
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="ruleForm.propertyFeePrice" size="mini" placeholder="请输入物业费">
              <template slot="append">元/m²</template>
            </el-input>
          </el-form-item>
          <el-row style="width:100%;" type="flex" justify="end">
            <el-button size="mini" @click="btnCancel">取消</el-button>
            <el-button size="mini" type="primary" @click="btnOk">确定</el-button>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getParkListAPI, delParkListAPI, addParkListAPI, emitParkListAPI } from '@/api'
export default {
  name: 'Parkone',
  data() {
    return {
      list: [],
      parkParams: {
        total: 0,
        name: '',
        page: 1,
        pageSize: 10
      },
      dialogVisible: false,
      labelPosition: 'top',
      ruleForm: {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      },
      rules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'change' },
          { validator: async(rule, value, callback) => {
            const { rows } = await getParkListAPI()
            rows.some(item => item.name === value) ? callback(new Error(`当前部门已有${value}名称`)) : callback()
          },
          trigger: 'blur'
          }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'change' }
          // { min: 1, max: 2, message: '楼层数最大为20', trigger: 'change' }
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'change' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getParkList()
  },
  methods: {
    async getParkList() {
      const { rows, total } = await getParkListAPI(this.parkParams)
      this.list = rows
      // console.log(this.list)
      this.parkParams.total = total
    },
    change(NewPage) {
      this.parkParams.page = NewPage
      this.getParkList()
    },
    handleSizeChange(NewpageSize) {
      this.parkParams.pageSize = NewpageSize
      this.getParkList()
    },
    async  del(id) {
      await delParkListAPI(id)
      this.getParkList()
      this.$message.success('删除部门成功')
    },
    add() {
      this.dialogVisible = true
    },
    btnCancel() {
      this.$refs.ruleForm.resetFields() /* 重置表单 */
      this.ruleForm = {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      }
      this.dialogVisible = false
    },
    async  btnOk() {
      console.log(this.ruleForm)

      this.$refs.ruleForm.validate()
      if (this.ruleForm.id) {
        await emitParkListAPI({
          id: this.ruleForm.id,
          name: this.ruleForm.name,
          floors: this.ruleForm.floors,
          area: this.ruleForm.area,
          propertyFeePrice: this.ruleForm.propertyFeePrice
        })
        // console.log(res)
        this.$message.success('编辑部门成功')
        this.getParkList()
        this.btnCancel()
      } else {
        await addParkListAPI(this.ruleForm)
        this.getParkList()
        this.$message.success('新增部门成功')
        this.btnCancel()
      }
    },
    search() { /* 搜索 */
      this.getParkList()
    },
    async emit(row) {
      // const res = await getParkListAPI(row.id)
      // console.log(res)
      this.list = row
      this.ruleForm = row
      this.dialogVisible = true
    }
  }
}
</script>
<style>
.wangjiedong{
 padding: 10px 20px;
}
.sousuo{
  margin-right: 15px;
}
</style>
